<template>
  <el-dialog v-model="store.isShowDetail" title="文章详情" width="50%" :before-close="handleClose">
    <el-descriptions :column="2" border>
      <el-descriptions-item label="文章标题">
        {{ detail.title }}
      </el-descriptions-item>
      <el-descriptions-item label="文章分类">
        {{ detail.category }}
      </el-descriptions-item>
      <el-descriptions-item label="文章状态">
        <el-tag :type="statusTagType">
          {{ BLOG_STATUS_MAP[detail.status] && BLOG_STATUS_MAP[detail.status].label }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="标签">
        <el-tag v-for="tag in detail.tags" :key="tag" class="mr-2">
          {{ tag }}
        </el-tag>
      </el-descriptions-item>
      <el-descriptions-item label="开始时间">
        {{ detail.startDate }}
      </el-descriptions-item>
      <el-descriptions-item label="结束时间">
        {{ detail.endDate }}
      </el-descriptions-item>
      <el-descriptions-item label="进度">
        <el-progress :percentage="detail.progress" :status="progressStatus" />
      </el-descriptions-item>
      <el-descriptions-item label="前依赖">
        <div v-for="dep in detail.preDependencies" :key="dep">
          {{ dep }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="后依赖">
        <div v-for="dep in detail.postDependencies" :key="dep">
          {{ dep }}
        </div>
      </el-descriptions-item>
      <el-descriptions-item label="文章概要" :span="2">
        <div class="summary">
          {{ detail.summary }}
        </div>
      </el-descriptions-item>
    </el-descriptions>

    <template #footer>
      <el-button @click="handleClose">关闭</el-button>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useGanttStore } from '@/store/modules/ganttStore';
import { BLOG_STATUS, BLOG_STATUS_MAP } from '@/constants/common/blog-status';

const props = defineProps({
  detail: {
    type: Object,
    required: true,
    default: () => ({
      title: '',
      category: '',
      status: '',
      tags: [],
      summary: '',
      progress: 0,
      startTime: '',
      endTime: '',
      preDependencies: [],
      postDependencies: []
    })
  }
});

const store = useGanttStore();

const handleClose = () => {
  store.hideDetailDialog();
};

const statusTagType = computed(() => {
  switch (props.detail.status) {
    case BLOG_STATUS.DRAFT:
      return 'primary';
    case BLOG_STATUS.PUBLISHED:
      return 'success';
    case BLOG_STATUS.DELETED:
      return 'danger';
    default:
      return '';
  }
});

const progressStatus = computed(() => {
  if (props.detail.progress >= 100) return 'success';
  if (props.detail.progress >= 70) return '';
  if (props.detail.progress >= 30) return 'warning';
  return 'exception';
});
</script>

<style scoped>
.summary {
  white-space: pre-wrap;
  line-height: 1.5;
}
.mr-2 {
  margin-right: 0.5rem;
}
</style>
